<template>
    <nly-row class="col DynamicCondition" >
        <nly-col xs="12" sm="12" md="12" lg="12" xl="12"  class="form-inline " style="justify-content: left;">
            <form-select 
                title="常用查询"
                addDefaultText="所有"
                labelStyle=""
                showSearch
                :rightStyle="rightStyle"
                class="ml-1 mb-2"
                :value="userSearchSelect"
                size="small"
                @change="onUserSearchChange"
                :dataList="userSearchSelectData"
                >
                <template v-slot:option="{item:optionItem}">
                    <i v-if="optionItem.key" @click.stop="onUserSearchDelete(optionItem)" class="fa fa-trash-alt mr-1" style="color: rgb(221, 90, 67);" />{{optionItem.title}} 
                </template>
            </form-select>
            <div v-for="(item) in FixedConditions" :key="item.id">
                <input-group-search v-if="item.type == '搜索选择'"
                    :title="item.name"
                    :modalTitle="'选择'+item.name"
                    labelStyle=""
                    :rightStyle="rightStyle"
                    class="ml-1 mb-2"
                    :treeType="item.val"
                    v-model="item.value"
                    :defaultVal="initGroupSearchDefaultVal((item.val == 'officeUser' && item.value) ? (item.value + '_user') : item.value)"
                    @input="updateItem(item.dataIndex,item)"
                ></input-group-search>
                <form-input v-if="item.type == '文本' || item.type == '区域' || item.type == '快速文本'"
                    :title="item.name"
                    labelStyle=""
                    :rightStyle="rightStyle"
                    class="ml-1 mb-2"
                    v-model="item.value"
                    :placeholder="item.code == 'crmName' ?'客户名称/首拼' :''"
                    @input="updateItem(item.dataIndex,item)"
                ></form-input>
                <form-select v-if=" item.type == '下拉'  || item.type == '性别'"
                    :title="item.name"
                     size="small"
                    labelStyle=""
                    showSearch
                    :rightStyle="rightStyle"
                    addDefaultText="全部"
                    class="ml-1 mb-2"
                    v-model="item.value"
                    :dataList="valForFormFN(item.val)"
                    @input="updateItem(item.dataIndex,item)"
                    >
             
                    
                </form-select>
                <form-radio v-if="item.type == '单选'"
                    :title="item.name"
                    labelStyle=""
                    :rightStyle="rightStyle"
                    class="ml-1 mb-2"
                    size="small"
                    v-model="item.value"
                    :keyPre="getOnlyCode(item)"
                    :dataList="valForFormFN(item.val)"
                    @input="updateItem(item.dataIndex,item)"
                    >
                </form-radio>
                <form-check-box v-if="item.type == '复选'"
                    :title="item.name"
                    labelStyle=""
                    :rightStyle="rightStyle"
                    class="ml-1 mb-2"
                    v-model="item.value"
                    :dataList="valForCheckBoxFN(item.val)"
                    @input="updateItem(item.dataIndex,item)"
                >
                </form-check-box>
                <form-radio v-if="item.type == '是否'"
                    :title="item.name"
                    labelStyle=""
                    :rightStyle="rightStyle"
                    class="ml-1 mb-2"
                    v-model="item.value"
                    :keyPre="getOnlyCode(item)"
                    :dataList="[
                        { key: item.dataType == 1 ? true : '是', title: '是' },
                        { key: item.dataType == 1 ? false : '否', title: '否' }
                    ]"
                    @input="updateItem(item.dataIndex,item)"
                ></form-radio>
                <form-rang-date-picker v-if="item.type == '日期'"
                    :title="item.name"
                    labelStyle=""
                    :rightStyle="rangDaterightStyle"
                    format="YYYY-MM-DD"
                    class="ml-1 mb-2"
                    v-model="item.rangDateVal"
                    @input="updateItem(item.dataIndex,item)"
                ></form-rang-date-picker>
                <form-rang-date-picker v-if="item.type == '时间'"
                    :title="item.name"
                    labelStyle=""
                    :rightStyle="rangDaterightStyle"
                    class="ml-1 mb-2"
                    show-time
                    format="YYYY-MM-DD HH:mm"
                    v-model="item.rangDateVal"
                   @input="updateItem(item.dataIndex,item)"
                ></form-rang-date-picker>
                <form-input-number v-if="item.type == '整数'"
                    :title="item.name"
                    labelStyle=""
                    :rightStyle="rightStyle"
                    class="ml-1 mb-2"
                    :precision="0"
                    :min="item.val ? 0 : -Infinity"
                    v-model="item.value"
                    @input="updateItem(item.dataIndex,item)"
                ></form-input-number>
                <form-input-number v-if="item.type == '小数'"
                    :title="item.name"
                    labelStyle=""
                    :rightStyle="rightStyle"
                    class="ml-1 mb-2"
                    :precision="0.1"
                    v-model="item.value"
                    @input="updateItem(item.dataIndex,item)"
                ></form-input-number>
            </div>
        </nly-col>
    </nly-row>
</template>

<script>

import {valForFormFN,valForCheckBoxFN,getOnlyCode,initGroupSearchDefaultVal} from "@/utils/customize"


export default {
    name:"FixedCondition",
    props:{
        conditions:{
            type: Array,
            default:()=>[]
        },
        rightStyle:{
            type: String,
            default: "width:120px;"
        },
        rangDaterightStyle:{
            type: String,
            default: "width:230px;display: flex;"
        },
        show:{
            type: Boolean,
            default: false
        },
         //用户常用查询条件
        userSearchList:{
            type: Array,
            default:()=>[]
        },
        userSearchSelect:{
            type: [String,Number],
            default: ""
        },
        //选择 常用查询条件事件
        onUserSearchChange:{
            type: Function,
            default: ()=>{}
        },
        //删除 常用查询条件事件
        onUserSearchDelete:{
            type: Function,
            default: ()=>{}
        },
        //固定查询条件的key
        FixedConditionKeys:{
            type: Array,
            default: ()=>[]
        }
    },
    data(){
        return{
            valForFormFN,
            valForCheckBoxFN,
            getOnlyCode,
            initGroupSearchDefaultVal
        }
    },
    created(){
         console.log("created->搜索组件...",this.conditions);
    },
    mounted(){
        console.log("mounted->搜索组件...",this.conditions);
    },
    computed:{
        FixedConditions:function(){
            const {conditions,FixedConditionKeys} = this;
            let d = new Array();
            conditions.forEach((f,index)=>{
                if(f.dataType == 1 && FixedConditionKeys.includes(f.code)){
                    f.dataIndex = index;
                    d.push(f);
                }
            });
            console.log("FixedConditions",d)
            return d;
        },
        userSearchSelectData:function(){
            const {userSearchList} = this;
            return userSearchList.map(f=> {
                return {key:f.id,title:f.searchName};
            })
        }
    },
  
    methods:{
        //强制更新 数组 对象，并进行试图渲染
        updateItem(index,item){
            this.$set(this.conditions,index,item);
        }
    },
    watch:{
        // conditions:{
        //     handler(newName, oldName) {
        //         console.log('动态条件_conditions_变动');
        //     },
        //     immediate: true,
        //     deep: true
        // }
        userSearchSelect:function(n,o){
            console.log("‘userSearchSelect 常用条件改变：",n,o)
        }
    }
}
</script>

<style lang="less">
.DynamicCondition{
    .ant-radio-wrapper{
        font-size: 1rem !important;
        padding: 0 !important;
        span.ant-radio + * {
        padding-right: 4px !important;
        padding-left: 0px !important;
        }
    }   
}

</style>